<template>
    <vxe-table
           ref="table"
          border
          :data="tableData"
          @toggle-row-expand="toggle"
          :expand-config="{accordion: true, lazy: true, loadMethod: loadContentMethod}">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column type="expand" width="80">
            <template v-slot:content="{ row }">
              <vxe-grid :columns="row.childCols" :data="row.childData"></vxe-grid>
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
           <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
          <vxe-table-column field="age" title="Age" width="300"></vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="200">
            <template v-slot="{ row }">
              <vxe-button type="text" @click="setRowExpand(row)">展开</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
</template>
<script>
import XEUtils from 'xe-utils';

 export default {
    data () {
    return {
        tableData: [
        { name: 'Develop', age: 20, sex: '女', childCols: [], childData: [] },
        { name: 'Develop', age: 22, sex: '女', childCols: [], childData: [] },
        { name: 'Develop', age: 24, sex: '男', childCols: [], childData: [] },
        { name: 'Develop', age: 26, sex: '女', childCols: [], childData: [] }
        ]
    }
    },
    methods: {
        toggle({ expanded, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
            if (expanded) {
                // console.log('expanded expanded ')
                // const childCols = XEUtils.sample([
                //     { type: 'seq', title: 'Sequence' },
                //     { field: 'name', title: 'Name' },
                //     { field: 'role', title: 'Role' },
                //     { field: 'age', title: 'Age' },
                //     { field: 'sex', title: 'Sex' }
                //     ], XEUtils.random(3, 5))
                // const childData = XEUtils.sample([
                //     { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
                //     { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
                //     { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
                //     { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
                //     { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
                //     { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }
                //     ], XEUtils.random(1, 5))
                // row.childCols = childCols
                // row.childData = childData
                this.$refs.table.reloadExpandContent(row);
            } else {
                row.childCols = [];
                row.childData = [];
            }
        },
        setRowExpand(row) {
            // this.$refs.table.toggleRowExpand(row)
            const expanded = this.$refs.table.isExpandByRow(row);
            this.$refs.table.setRowExpand(row, !expanded);
            if (!expanded) {
                // console.log('expanded expanded ')
                // const childCols = XEUtils.sample([
                //     { type: 'seq', title: 'Sequence' },
                //     { field: 'name', title: 'Name' },
                //     { field: 'role', title: 'Role' },
                //     { field: 'age', title: 'Age' },
                //     { field: 'sex', title: 'Sex' }
                //     ], XEUtils.random(3, 5))
                // const childData = XEUtils.sample([
                //     { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
                //     { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
                //     { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
                //     { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
                //     { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
                //     { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }
                //     ], XEUtils.random(1, 5))
                // row.childCols = childCols
                // row.childData = childData
                this.$refs.table.reloadExpandContent(row);
            } else {
                row.childCols = [];
                row.childData = [];
            }
        },
    loadContentMethod ({ row }) {
        return new Promise(resolve => {
            setTimeout(() => {
                const childCols = XEUtils.sample([
                    { type: 'seq', title: 'Sequence' },
                    { field: 'name', title: 'Name' },
                    { field: 'role', title: 'Role' },
                    { field: 'age', title: 'Age' },
                    { field: 'sex', title: 'Sex' }
                    ], XEUtils.random(3, 5))
                const childData = XEUtils.sample([
                    { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
                    { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
                    { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
                    { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
                    { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
                    { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }
                    ], XEUtils.random(1, 5))
                row.childCols = childCols
                row.childData = childData
                resolve()
            }, 50)
        })
    }
    }
}
</script>